Customization options for start page's background #1437

danburonline · 2023-11-20T13:16:53Z

Fixes #3761

Description

I have updated the documentation for Nexus and included example screenshots. You can find the pull request here.
The background video was implemented, but it did not play in the production version due to an issue with the Webpack configuration. This issue has been fixed.
Instead of using a video cover, I have replaced it with a backup image using the source tag. This prevents flickering of the background by loading the image first.
The PNG logo on the top left has been replaced with an SVG logo, including fine-tuned adjustments to the spacing.
I replaced the logo with the correct version that has the HEX codes from the Fusion codebase, as the previous logo had incorrect colors due to being an old version.
I have compressed the images using the Guetzli algorithm, reducing their file size by a few KBs.
The background video has been compressed using proper dynamic H264 bitrate compression, resulting in a significantly smaller file size.
I removed the last two frames of the background video. It appears that they were cut right before another movement, causing slight blur but no movement. The video now loops more smoothly.
I have fixed some typos in all the files I worked on.
The TypeScript imports have been automatically ordered using my ESLint addon. I am considering adding an ESLint rule for the codebase in the future and transitioning from TSLint to ESLint, as TSLint is deprecated.
Markdown errors have been corrected.
Alt attributes have been added to the images in the files I worked on.
The order of HTML tags on the landing page has been changed to make the logo on the top left clickable and improve loading priorities, with the video being loaded last.
Semantic HTML tags have been used instead of <div>.
The Connect button now has a different cursor when there are no Realms set up.
A lang attribute and read direction have been added to the root HTML, as the Helmet settings were not working.
The missing LOGO_LINK environment variable has been set up to make the logo clickable.
Ensure that the cover image, background image, and all other banner images do not get squeezed when the browser window is resized. Here's a "before and after" comparison:

How has this been tested?

Tested it locally on my laptop via the development server and prod build. I didn't do any functional changes. Tests pass.

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

My change requires a change to the documentation.
I have updated the documentation accordingly.
I have added screenshots (if applicable), in the comment section.

Signed-off-by: Dinika Saxena <[email protected]>

codecov-commenter · 2023-11-21T07:51:51Z

Codecov Report

Attention: 1 lines in your changes are missing coverage. Please review.

Comparison is base (5db9678) 47.99% compared to head (b2672eb) 48.05%.
Report is 3 commits behind head on develop.

Files	Patch %	Lines
src/shared/store/actions/search.ts	50.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #1437      +/-   ##
===========================================
+ Coverage    47.99%   48.05%   +0.05%     
===========================================
  Files          249      249              
  Lines        11362    11365       +3     
  Branches      2655     2655              
===========================================
+ Hits          5453     5461       +8     
+ Misses        5876     5870       -6     
- Partials        33       34       +1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Due to rendering order, blocking and natural z-index.

Including fixing the Cypress test.

Without visual compression loss and I also removed the last two frames as there was an issue with them (the loop looked off).

Guetzli compression.

Adding `h1` title and `main` tags.

The `htmlAttributes` was empty, also in prod. As we only have the app in EN, it makes sense to add it statically in the root HTML(s).

Now, we can click directly on the URL in the terminal.

Incl. sort imports. I will add a import-sort rule in a later PR.

It was documented in the README, but we didn't use it.

Incl. added alt attribute for the images.

I was looking at the colors in the official logo and couldn't find it. Therefore I was investigating this file and cleaned it.

Dinika

Looks great too :)

src/pages/IdentityPage/IdentityPage.tsx

src/pages/IdentityPage/styles.less

src/server/index.tsx

bilalesi

nice PR 🎆

src/server/index.tsx

src/server/silent_refresh.ts

olivergrabinski · 2023-12-01T10:42:00Z

Ensure that the cover image, background image, and all other banner images do not get squeezed when the browser window is resized. Here's a "before and after" comparison

🤩

… feature/org-welcome-page-bg # Conflicts: # src/shared/containers/ResourceViewActionsContainer.tsx

Bilal Meddah and others added 13 commits November 7, 2023 17:01

update: add diff fields depends on the added/deleted/updated status

faa8fff

f4011/update: improve checking and return only not empty result

9717592

update: show deleted values as an array

0848ffb

f4011/update: add tagging func to a resource for a specific revision

05be912

update: use mutate instead of mutateAsync

5c2ea4e

f4011/fix: test for data explorer flow

935edf9

f4011/fix: test error text for regex of org/project/tag

c2b9a1c

Record video to help with debugging

fcb436d

Try recording failing test

2b28353

Run at 12:30

8b7a460

Signed-off-by: Dinika Saxena <[email protected]>

Setup notification process for slack

f98a9b6

Fix typo of renamed exported component

cc6744c

Go through root README and fix markdown errors

4e0e284

danburonline self-assigned this Nov 20, 2023

danburonline changed the title ~~Background image~~ Customization options for start page's background Nov 20, 2023

danburonline added 3 commits November 20, 2023 14:47

Adjust Webpack config to display videos on home UI

b7fa5f7

Add alt attribute to home logo

c1a89bf

Add object-fit: cover to image element

3387124

danburonline added 11 commits November 21, 2023 09:47

Fix video file path in IdentityPage component

9805db7

Sort CSS/LESS properties

5e95dbf

Change order of video element in HTML doc

4d95b86

Due to rendering order, blocking and natural z-index.

Adjust start page with better A11y

4a7d5fb

Including fixing the Cypress test.

Have different cursor if ID connect isn't set up

7468682

Reduce video file size by 12 MB

0edd7d3

Without visual compression loss and I also removed the last two frames as there was an issue with them (the loop looked off).

Reduce cover image from 636 KB to 114 KB

89fe998

Guetzli compression.

Use semantic tag for navigation (<nav/>)

f817cc4

Use more semantic HTML tags

01d200c

Adding `h1` title and `main` tags.

Add lang attributes, Helmet attr. weren't working

ef81e89

The `htmlAttributes` was empty, also in prod. As we only have the app in EN, it makes sense to add it statically in the root HTML(s).

Change the server's log in order to improve DX

3ebcade

Now, we can click directly on the URL in the terminal.

danburonline added 7 commits November 22, 2023 12:01

Fix typos in file that I opened

579bf8a

Remove main tag again, as we have a root one

290a902

Incl. sort imports. I will add a import-sort rule in a later PR.

Add LOGO_LINK to env setup

3c99063

It was documented in the README, but we didn't use it.

Fixing another typo

cbaa3f2

Don't use a poster on video as BG flickers on load

dad3992

Adjust logo spacing on the landing page

c9183db

Make the BG color work on the landing page

6a242bf

danburonline added enhancement feature labels Nov 22, 2023

danburonline added 4 commits November 22, 2023 16:15

Fix the squeezing of the other banner images too

370f0f0

Incl. added alt attribute for the images.

Sort and clean shared LESS lib

602e06b

I was looking at the colors in the official logo and couldn't find it. Therefore I was investigating this file and cleaned it.

Use a SVG instead of a bitmap for the BBP logo

82af189

Fix color of logo and remove redundant LESS rule

ca4886d

danburonline marked this pull request as ready for review November 23, 2023 09:59

danburonline mentioned this pull request Nov 23, 2023

Updated docs for Fusion customizations BlueBrain/nexus#4524

Merged

danburonline requested a review from bilalesi November 23, 2023 10:05

Dinika previously approved these changes Nov 28, 2023

View reviewed changes

src/pages/IdentityPage/IdentityPage.tsx Outdated Show resolved Hide resolved

src/pages/IdentityPage/styles.less Outdated Show resolved Hide resolved

src/server/index.tsx Show resolved Hide resolved

Adjust alt tag for fallback image on landing page

7717475

danburonline dismissed Dinika’s stale review via 7717475 November 28, 2023 14:53

Use font fam via @font-family

b54f705

bilalesi reviewed Nov 30, 2023

View reviewed changes

src/server/index.tsx Outdated Show resolved Hide resolved

src/server/silent_refresh.ts Show resolved Hide resolved

Remove unused SECURE env var

164fb50

bilalesi approved these changes Dec 6, 2023

View reviewed changes

danburonline changed the base branch from main to develop December 6, 2023 09:12

danburonline mentioned this pull request Dec 6, 2023

Fix external links in fusion docs BlueBrain/nexus#4570

Merged

Merge branch 'develop' of https://github.com/BlueBrain/nexus-web into…

b2672eb

… feature/org-welcome-page-bg # Conflicts: # src/shared/containers/ResourceViewActionsContainer.tsx

danburonline merged commit 9b927a0 into develop Dec 8, 2023
1 check passed

danburonline deleted the feature/org-welcome-page-bg branch December 8, 2023 14:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Customization options for start page's background #1437

Customization options for start page's background #1437

danburonline commented Nov 20, 2023 •

edited

Loading

codecov-commenter commented Nov 21, 2023 •

edited

Loading

Dinika left a comment

bilalesi left a comment

olivergrabinski commented Dec 1, 2023

Customization options for start page's background #1437

Customization options for start page's background #1437

Conversation

danburonline commented Nov 20, 2023 • edited Loading

Description

How has this been tested?

Types of changes

Checklist:

codecov-commenter commented Nov 21, 2023 • edited Loading

Codecov Report

Dinika left a comment

Choose a reason for hiding this comment

bilalesi left a comment

Choose a reason for hiding this comment

olivergrabinski commented Dec 1, 2023

danburonline commented Nov 20, 2023 •

edited

Loading

codecov-commenter commented Nov 21, 2023 •

edited

Loading